<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="日期" prop="cDate">
        <el-date-picker
          v-model="queryParams.cDate"
          type="date"
          size="small"
          value-format="yyyy-MM-dd"
          @keyup.enter.native="handleQuery"
          placeholder="请输入查询日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['scrball:all:add']"
        >新增</el-button>
      </el-col>
      <!--<el-col :span="1.5">-->
        <!--<el-button-->
          <!--type="success"-->
          <!--plain-->
          <!--icon="el-icon-edit"-->
          <!--size="mini"-->
          <!--:disabled="single"-->
          <!--@click="handleUpdate"-->
          <!--v-hasPermi="['scrball:all:edit']"-->
        <!--&gt;预览</el-button>-->
      <!--</el-col>-->

      <!--<el-col :span="1.5">-->
        <!--<el-button-->
          <!--type="warning"-->
          <!--plain-->
          <!--icon="el-icon-download"-->
          <!--size="mini"-->
          <!--:disabled="single"-->
          <!--@click="handleDownload"-->
          <!--v-hasPermi="['scrball:all:export']"-->
        <!--&gt;下载</el-button>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>


    <el-table v-loading="loading" :data="zbList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="日期" align="center" prop="cDate" />
      <el-table-column label="能源公司进耗存录入" align="center" prop="cNygs" />
      <el-table-column label="废钢加工进耗存录入" align="center" prop="cFgjg" />
      <el-table-column label="电炉废钢进耗存录入" align="center" prop="cDlfg" />
      <el-table-column label="球团铁原料进耗存录入" align="center" prop="cQtyl" />
      <el-table-column label="氢冶金外发进耗存录入" align="center" prop="cQjywf" />
      <el-table-column label="物流外发进耗存录入" align="center" prop="cWlwf" />
      <el-table-column label="连铸坯库存录入" align="center" prop="cLzpkc" />
      <el-table-column label="钢材成品库存录入" align="center" prop="cGccpkc" />
      <el-table-column label="金属制品原料库存录入" align="center" prop="cJszpylkc" />
      <el-table-column label="特材产品库存录入" align="center" prop="cTccpkc" />
      <el-table-column label="气化煤进耗存录入" align="center" prop="cQhm" />
      <!--<el-table-column label="备注" align="center" prop="remake" />-->
      <el-table-column label="特材外发进耗存录入" align="center" prop="zfree1" />
      <el-table-column label="附企进耗存录入" align="center" prop="zfree2" />
      <!--<el-table-column label="${comment}" align="center" prop="zfree2" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree3" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree4" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree5" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree6" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree7" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree8" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree9" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree10" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree11" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree12" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree13" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree14" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree15" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree16" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree17" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree18" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree19" />-->
      <!--<el-table-column label="${comment}" align="center" prop="zfree20" />-->
      <!--<el-table-column label="删除标志" align="center" prop="cState" />-->

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['jhczb:zb:edit']">
          预览</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleDownload(scope.row)"
            v-hasPermi="['scrball:all:export']"
          >下载</el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改进耗存录入总表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="日期" prop="cDate" >
          <el-date-picker
            v-model="form.cDate"
            :disabled=!isInsert
            type="date"
            size="small"
            value-format="yyyy-MM-dd"
            placeholder="请输入日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!--<div class="table">-->
        <!--<div v-html="ExcelText"></div>-->
      <!--</div>-->

      <!--<el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
        <!--<el-form-item label="能源公司进耗存录入" prop="cNygs">-->
          <!--<el-input v-model="form.cNygs" placeholder="请输入能源公司进耗存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="废钢加工进耗存录入" prop="cFgjg">-->
          <!--<el-input v-model="form.cFgjg" placeholder="请输入废钢加工进耗存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="电炉废钢进耗存录入" prop="cDlfg">-->
          <!--<el-input v-model="form.cDlfg" placeholder="请输入电炉废钢进耗存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="球团铁原料进耗存录入" prop="cQtyl">-->
          <!--<el-input v-model="form.cQtyl" placeholder="请输入球团铁原料进耗存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="氢冶金外发进耗存录入" prop="cQjywf">-->
          <!--<el-input v-model="form.cQjywf" placeholder="请输入氢冶金外发进耗存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="物流外发进耗存录入" prop="cWlwf">-->
          <!--<el-input v-model="form.cWlwf" placeholder="请输入物流外发进耗存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="连铸坯库存录入" prop="cLzpkc">-->
          <!--<el-input v-model="form.cLzpkc" placeholder="请输入连铸坯库存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="钢材成品库存录入" prop="cGccpkc">-->
          <!--<el-input v-model="form.cGccpkc" placeholder="请输入钢材成品库存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="金属制品原料库存录入" prop="cJszpylkc">-->
          <!--<el-input v-model="form.cJszpylkc" placeholder="请输入金属制品原料库存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="特材产品库存录入" prop="cTccpkc">-->
          <!--<el-input v-model="form.cTccpkc" placeholder="请输入特材产品库存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="气化煤进耗存录入" prop="cQhm">-->
          <!--<el-input v-model="form.cQhm" placeholder="请输入气化煤进耗存录入" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="备注" prop="remake">-->
          <!--<el-input v-model="form.remake" placeholder="请输入备注" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree1">-->
          <!--<el-input v-model="form.zfree1" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree2">-->
          <!--<el-input v-model="form.zfree2" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree3">-->
          <!--<el-input v-model="form.zfree3" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree4">-->
          <!--<el-input v-model="form.zfree4" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree5">-->
          <!--<el-input v-model="form.zfree5" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree6">-->
          <!--<el-input v-model="form.zfree6" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree7">-->
          <!--<el-input v-model="form.zfree7" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree8">-->
          <!--<el-input v-model="form.zfree8" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree9">-->
          <!--<el-input v-model="form.zfree9" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree10">-->
          <!--<el-input v-model="form.zfree10" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree11">-->
          <!--<el-input v-model="form.zfree11" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree12">-->
          <!--<el-input v-model="form.zfree12" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree13">-->
          <!--<el-input v-model="form.zfree13" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree14">-->
          <!--<el-input v-model="form.zfree14" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree15">-->
          <!--<el-input v-model="form.zfree15" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree16">-->
          <!--<el-input v-model="form.zfree16" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree17">-->
          <!--<el-input v-model="form.zfree17" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree18">-->
          <!--<el-input v-model="form.zfree18" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree19">-->
          <!--<el-input v-model="form.zfree19" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="${comment}" prop="zfree20">-->
          <!--<el-input v-model="form.zfree20" placeholder="请输入${comment}" />-->
        <!--</el-form-item>-->
        <!--<el-form-item label="删除标志" prop="cState">-->
          <!--<el-input v-model="form.cState" placeholder="请输入删除标志" />-->
        <!--</el-form-item>-->
      <!--</el-form>-->

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listZb, getZb, delZb, addZb, updateZb } from "@/api/jhczb/zb";

import { getFgdl } from "@/api/jhc/fgdl";
import { getFgjg } from "@/api/jhc/fgjg";
import { getGccpkc } from "@/api/jhc/gccpkc";
import { getJh } from "@/api/jhc/jh";
import { getJszpylkc } from "@/api/jhc/jszpylkc";
import { getLzpkc } from "@/api/jhc/lzpkc";
import { getQhm } from "@/api/jhc/qhm";
import { getQttyl } from "@/api/jhc/qttyl";
import { getQyjwf } from "@/api/jhc/qyjwf";
import { getTccpkc } from "@/api/jhc/tccpkc";
import { getWlwf } from "@/api/jhc/wlwf";
import { getTcwf } from "@/api/jhc/tcwf";
import { getFq } from "@/api/jhc/fq";

import XLSX from "xlsx";
import axios from 'axios';


export default {
  name: "Zb",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 进耗存录入总表表格数据
      zbList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        cDate: null,
        pageNum: 1,
        pageSize: 10,
        cNygs: null,
        cFgjg: null,
        cDlfg: null,
        cQttyl: null,
        cQjywf: null,
        cWlwf: null,
        cTcwf: null,
        cFq: null,
        cLzpkc: null,
      cGccpkc: null,
        cJszpylkc: null,
        cTccpkc: null,
        cQhm: null,
        cState: null,
        remake: null,
        zfree1: null,
        zfree2: null,
        zfree3: null,
        zfree4: null,
        zfree5: null,
        zfree6: null,
        zfree7: null,
        zfree8: null,
        zfree9: null,
        zfree10: null,
        zfree11: null,
        zfree12: null,
        zfree13: null,
        zfree14: null,
        zfree15: null,
        zfree16: null,
        zfree17: null,
        zfree18: null,
        zfree19: null,
        zfree20: null,
        cState: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      isInsert:true,
      riqi: this.formatDate(new Date(),"yyyy-MM"),
      ExcelText: null,

      fgdlform:{},
      fgjgform:{},
      gccpkcform:{},
      jhform:{},
      jszpylkcform:{},
      lzpkcform:{},
      qhmform:{},
      qttylform:{},
      qyjwfform:{},
      tccpkcform:{},
      wlwfform:{},
      tcwfform:{},
      fqform:{},

      fgdlopen:false,
      fgjgopen:false,
      gccpkcopen:false,
      jhopen:false,
      jszpylkcopen:false,
      lzpkcopen:false,
      qhmopen:false,
      qttylopen:false,
      qyjwfopen:false,
      tccpkcopen:false,
      wlwfopen:false,
      tcwfopen:false,
      fqopen:false,
    };
  },
  created() {
    this.getList();
  },
  computed: {
    // 计算属性在某些场景下（此示例），要比侦听器代码精简。
    excelURL() {
      // return '/prod-api/profile/zhuanxing/'+this.riqi + '.xlsx';
      // return '/dev-api/profile/profile/aaa.xlsx';

      return '/dev-api/jhczb/zb/download';
    }
  },

  methods: {
    /** 查询进耗存录入总表列表 */
    getList() {
      this.loading = true;
      listZb(this.queryParams).then(response => {
        this.zbList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        cDate: null,
        cNygs: null,
        cFgjg: null,
        cDlfg: null,
        cQttyl: null,
        cQyjwf: null,
        cWlwf: null,
        cTcwf: null,
        cLzpkc: null,
        cGccpkc: null,
        cJszpylkc: null,
        cTccpkc: null,
        cQhm: null,
        cFq: null,

        remake: null,
        zfree1: null,
        zfree2: null,
        zfree3: null,
        zfree4: null,
        zfree5: null,
        zfree6: null,
        zfree7: null,
        zfree8: null,
        zfree9: null,
        zfree10: null,
        zfree11: null,
        zfree12: null,
        zfree13: null,
        zfree14: null,
        zfree15: null,
        zfree16: null,
        zfree17: null,
        zfree18: null,
        zfree19: null,
        zfree20: null,
        cState: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.cDate)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.isInsert=true;
      this.title = "添加进耗存录入总表";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.isInsert=false;
      const cDate = row.cDate || this.ids
    //   getZb(cDate).then(response => {
      //     this.form = response.data;
      //     this.open = true;
      //     this.title = "修改进耗存录入总表";
      //   });
      getFgdl(cDate).then(response => {
        this.fgdlform = response.data;
        this.fgdlopen = true;
        this.title = "预览进耗存录入总表";
      });

      getFgjg(cDate).then(response => {
        this.fgjgform = response.data;
        this.fgjgopen = true;
        this.title = "预览进耗存录入总表";
      });

      getGccpkc(cDate).then(response => {
        this.gccpkcform = response.data;
        this.gccpkcopen = true;
        this.title = "预览进耗存录入总表";
      });
      getJh(cDate).then(response => {
        this.jhform = response.data;
        this.jhopen = true;
        this.title = "预览进耗存录入总表";
      });
      getJszpylkc(cDate).then(response => {
        this.jszpylkcform = response.data;
        this.jszpylkcopen = true;
        this.title = "预览进耗存录入总表";
      });
      getLzpkc(cDate).then(response => {
        this.lzpkcform = response.data;
        this.lzpkcopen = true;
        this.title = "预览进耗存录入总表";
      });
      getQhm(cDate).then(response => {
        this.qhmform = response.data;
        this.qhmopen = true;
        this.title = "预览进耗存录入总表";
      });
      getQttyl(cDate).then(response => {
        this.qttylform = response.data;
        this.qttylopen = true;
        this.title = "预览进耗存录入总表";
      });
      getGyjwf(cDate).then(response => {
        this.qyjwfform = response.data;
        this.qyjwfopen = true;
        this.title = "预览进耗存录入总表";
      });
      getTccpkc(cDate).then(response => {
        this.tccpkcform = response.data;
        this.tccpkcopen = true;
        this.title = "预览进耗存录入总表";
      });
      getWlwf(cDate).then(response => {
        this.wlwfform = response.data;
        this.wlwfopen = true;
        this.title = "预览进耗存录入总表";
      });
      getWlwf(cDate).then(response => {
        this.tcwfform = response.data;
        this.tcwfopen = true;
        this.title = "预览进耗存录入总表";
      });

    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (!this.isInsert) {
            updateZb(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addZb(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const cDates = row.cDate || this.ids;
      this.$modal.confirm('是否确认删除进耗存录入总表编号为"' + cDates + '"的数据项？').then(function() {
        return delZb(cDates);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('jhczb/zb/export', {
        ...this.queryParams
      }, `zb_${new Date().getTime()}.xlsx`)
    },

    /** 下载按钮操作 */
    handleDownload(row) {
      this.queryParams.cDate=row.cDate || this.ids
      this.download('jhczb/zb/download', {
        ...this.queryParams
      }, `进耗存表${row.cDate}.xls`)
    },
    getExcelText() {
      axios.get(this.excelURL,{
        responseType: "arraybuffer", // 设置响应体类型为arraybuffer
      }).then(({data})=> {
        console.log(data);
        let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析数据
        var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
        this.ExcelText = XLSX.utils.sheet_to_html(worksheet); // 渲染
      })
    },
    formatDate(date,fmt) {
      if(/(y+)/.test(fmt)){
        fmt = fmt.replace(RegExp.$1,(date.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      let o ={
        'M+': date.getMonth()+1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o){
        if(new RegExp(`(${k})`).test(fmt))
        {
          let str = o[k] + '';
          fmt=fmt.replace(RegExp.$1,(RegExp.$1.length===1)?str:this.padLeftZero(str))
        }

      }
      return fmt
    },
    padLeftZero(str){
      return ('00' + str).substr(str.length)
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .table {
    border-collapse: collapse;
    width: 100%;
    /*margin: 0 auto;*/
    text-align: center;
  }

  .table td, .table th {
    border: 2px solid #000000;
    color: #000000;
    height: 30px;
  }

  .table thead th {
    background-color: #CCE8EB;
    /*width: 100px;*/
  }

  .table tr:nth-child(odd) {
    background: #fff;
  }

  .table tr:nth-child(even) {
    background: #F5FAFA;
  }
</style>
